<template>
  <div class="efficiency">
    <!-- <div class="efficiency-title">
      <cestc-two-title title="事件网办率TOP10" />
    </div> -->
    <div id="efficiency-chart" />
  </div>
</template>

<script>
// import * as echarts from 'echarts'
// import apijsonApi from '@/api/api-json.js'
// import { SimpleDataLoadMixin } from '@/mixin/SimpleDataLoadMixin.js'
export default {
  // mixins: [SimpleDataLoadMixin],
  data () {
    return {

    }
  },
  mounted () {
    // this.loadData()
    this.afterLoad()
  },
  methods: {
    // getRequest() {
    //   var obj = {
    //     'T_a_sjwbl[]': {
    //       'T_a_sjwbl': {
    //         '@order': 'wbl-'
    //       },
    //       count: 10
    //     }
    //   }
    //   return apijsonApi(obj)
    // },
    // resolvingData(res) {
    //   return res['T_a_sjwbl[]']
    // },
    afterLoad () {
      this.initEcharts()
    },
    initEcharts () {
      const chart = this.$echarts.init(document.getElementById('efficiency-chart'))
      const MyCube = this.getMyCube()
      this.$echarts.graphic.registerShape('MyCube', MyCube)
      const option = this.getOptions()
      chart.setOption(option, true)
    },
    getOptions () {
      const xAxisData = ['测试1', '测试2', '测试3', '测试4', '测试5', '测试6', '测试7', '测试8', '测试9', '测试10']
      const seriesData = [11, 12, 14, 21, 10, 17, 9, 13, 15, 17]
      // this.data.forEach(item => {
      //   xAxisData.push(item.sjmc)
      //   seriesData.push(item.wbl)
      // })
      const option = {
        textStyle: {
          fontFamily: 'PingFangSC-Medium, PingFang SC',
          color: '#F2F1FF',
          fontSize: 28
        },
        xAxis: {
          type: 'category',
          data: xAxisData,
          axisLabel: {
            color: '#F2F1FF',
            fontSize: 28,
            margin: 15,
            rotate: -35,
            width: 140,
            overflow: 'truncate',
            interval: 0
            // ...props.xAxisLabel
          },
          axisLine: {
            onZero: true,
            lineStyle: {
              color: 'rgba(221, 242, 255, 0.2)'
            }
          }
        },
        grid: {
          top: '15%',
          bottom: '0',
          left: '3%',
          right: '4%',
          containLabel: true
        },
        yAxis: [{
          name: '单位：%',
          type: 'value',
          offset: 10,
          nameTextStyle: {
            fontSize: 24,
            color: 'rgba(255, 251, 245, 0.8000)',
            padding: [0, 0, 10, 20]
          },
          axisLabel: {
            color: '#F2F1FF',
            fontSize: 28
            // ...props.yAxisLabel
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: ['rgba(255, 210, 162, 0.6000)']
            }
          }
        }],
        tooltip: {
          show: true,
          type: 'item',
          textStyle: {
            color: '#FFFBF5',
            lineHeight: 52,
            fontSize: 32
          },
          padding: 36,
          backgroundColor: 'rgba(20, 29, 51, 0.8000)',
          borderColor: 'rgba(204, 147, 61, 1)',
          formatter: '{a}<br/><div><span>{b}</span><span style="margin-left: 50px;font-weight: bold;color:rgba(255, 210, 162, 1);">{c}%</span></div>'
          // ...props.tooltip
        },
        series: [
          {
            type: 'custom',
            name: '事件网办率',
            data: seriesData,
            // 自定义图形
            renderItem: (params, api) => {
              // 类目宽度
              const categoryWidth = api.size([api.value(0), 0])[0]
              // x轴上点的坐标
              const p0 = api.coord([api.value(0), 0])
              // 实际值的坐标
              const p1 = api.coord([api.value(0), api.value(1)])
              // 宽度计算，最大宽度为类目宽度的99%
              let widthRate = parseFloat(45 || '60%')
              widthRate = (widthRate > 99 ? 60 : widthRate) * 0.01
              return {
                // 通过echarts.extend()注册的自定义图形
                type: 'MyCube',
                // 传入坐标数据，用以绘制图形
                shape: {
                  pX: p0[0],
                  p0Y: p0[1],
                  p1Y: p1[1],
                  width: categoryWidth * widthRate
                },
                // 过渡动画，设置shape中的属性进行过渡
                transition: 'shape',
                // 入场动画
                enterFrom: {
                  shape: {
                    p1Y: p0[1]
                  }
                },
                style: api.style()
              }
            },
            universalTransition: true,
            itemStyle: {
              // color: props.color[0],
              borderWidth: 3,
              shadowColor: 'rgba(61, 189, 255, .3)',
              shadowBlur: 5,
              borderColor: '#3DBDFF',
              color: {
                x: 0,
                y: 1,
                x2: 0,
                y2: 0,
                colorStops: [{
                  offset: 0, color: 'rgba(82, 126, 227, 0.3500)' // 0% 处的颜色
                }, {
                  offset: 1, color: 'rgba(82, 126, 227, 0.4)' // 100% 处的颜色
                }],
                global: false // 缺省为 false
              }
            }
          }
        ]
      }
      return option
    },
    getMyCube () {
      const MyCube = this.$echarts.graphic.extendShape({
        buildPath: (ctx, shape) => {
          const xAxisPoint = [shape.pX, shape.p0Y] // x轴上的位置
          const location = [shape.pX, shape.p1Y] // 实际位置
          const offsetX = shape.width / 2
          let offsetY = shape.width / 4
          if (shape.p0Y - shape.p1Y < 0) {
            offsetY = -1 * offsetY
          } else if (shape.p0Y - shape.p1Y === 0) {
            return
          }
          // 绘制图形，高度为0时不进行绘制
          const p1 = [xAxisPoint[0] - offsetX, xAxisPoint[1]]
          const p2 = [xAxisPoint[0], xAxisPoint[1] + offsetY]
          const p3 = [xAxisPoint[0] + offsetX, xAxisPoint[1]]
          const p4 = [location[0] - offsetX, location[1]]
          const p5 = [location[0], location[1] + offsetY]
          const p6 = [location[0] + offsetX, location[1]]
          const p7 = [xAxisPoint[0], location[1] - offsetY]

          ctx.moveTo(...p1)
          ctx.lineTo(...p2)
          ctx.lineTo(...p3)
          ctx.lineTo(...p6)
          ctx.lineTo(...p7)
          ctx.lineTo(...p4)
          ctx.lineTo(...p1)
          ctx.moveTo(...p5)
          ctx.lineTo(...p2)
          ctx.moveTo(...p5)
          ctx.lineTo(...p4)
          ctx.moveTo(...p5)
          ctx.lineTo(...p6)
          ctx.closePath()
        }
      })
      return MyCube
    }
  }
}
</script>

<style lang="scss" scoped>
.efficiency {
  width: 100%;
  height: 100%;
  background: rgb(1, 8, 24);
  display: flex;
  flex-flow: column;

  &-title {
    padding-left: 15px;

  }

  #efficiency-chart {
    flex: 1;
  }
}
</style>
